import "taro-ui/dist/style/components/button.scss" // 按需引入
import { View, Label, Checkbox, Image, Text } from '@tarojs/components'
import React, { useState } from 'react'
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/checkbox.scss";
import './transPeople.less'
import { AtInput, AtIcon } from 'taro-ui'


function TransPeople() {
    const [value, setValue] = useState('');
    const handleChange = (value) => {
        setValue(value);
        // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
        return value
    }

    // const [checkedList, setCheckedList] = useState('list1');
    // const checkboxOption = [{
    //     value: 'list1',
    // }, {
    //     value: 'list2',
    // }, {
    //     value: 'list3',
    // }, {
    //     value: 'list4',
    // }]
    // const handleChange2 = (value) => {
    //     setCheckedList(value);
    //     return value;
    // }
    const state = {
        list: [
            {
                value: '1',
                headSrc: 'https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg',
                name: '徐晓菁',
                ability: '助医、清洁、陪护',
                distance: 40,
                state: 1 ? '空闲' : '忙碌',
                checked: false
            },
            {
                value: '2',
                headSrc: 'https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg',
                name: '萨迦',
                ability: '助医',
                distance: 60,
                state: 0 ? '空闲' : '忙碌',
                checked: true
            },
            {
                value: '3',
                headSrc: 'https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg',
                name: 'kike',
                ability: '清洁',
                distance: 90,
                state: 1 ? '空闲' : '忙碌',
                checked: false
            },
        ]
    }


    return <View className="transPeopleBox">
        {/* 搜索框 */}
        <View className="searchBox">
            <AtIcon value='search' size='18' color='#eee' className="iconCss1"></AtIcon>
            <AtInput
                className="inputCss1"
                name='value'
                type='text'
                placeholder='请输入姓名/服务'
                value={value}
                onChange={handleChange}
            />
        </View>
        {/* 收转人列表 */}
        {/* <View className="peopleBox"> */}
        {/* 第一个列表 */}{/* 里面的前半部分 */}{/* 后面的部分 */}
        {/* <View className="pBlist1">
                
                <View className="listLeftBox">
                    <Label>
                        <Checkbox value="1" checked={true} className="checkB1"></Checkbox>
                    </Label>
                    <View className="pBImgBox">
                        <Image src="https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg"></Image>
                    </View>
                    <View className="pBConBox">
                        <View>
                            <Text>徐晓菁</Text>
                            <View>
                                <AtIcon value='phone' size='10' color='#fff'></AtIcon>
                            </View>
                        </View>
                        <Text>助医、清洁、陪护</Text>
                    </View>
                </View>
                
                <View className="listRightBox">
                    <Text>距离用户50m</Text>
                    <Text>空闲</Text>
                </View>
            </View> */}

        {
            state.list.map((item, index) => {
                return (
                    <View className="peopleBox">
                        <View className="pBlist1">
                            {/* 里面的前半部分 */}
                            <View className="listLeftBox">
                                <Label>
                                    <Checkbox value={item.value} checked={true} className="checkB1"></Checkbox>
                                </Label>
                                <View className="pBImgBox">
                                    <Image src={item.headSrc}></Image>
                                </View>
                                <View className="pBConBox">
                                    <View>
                                        <Text>{item.name}</Text>
                                        <View>
                                            <AtIcon value='phone' size='10' color='#fff'></AtIcon>
                                        </View>
                                    </View>
                                    <Text>{item.ability}</Text>
                                </View>
                            </View>
                            {/* 后面的部分 */}
                            <View className="listRightBox">
                                <Text>距离用户{item.distance}m</Text>
                                <Text>{item.state}</Text>
                            </View>
                        </View>
                    </View>
                )
            })
        }

    </View>

}
export default TransPeople;
